<template>
  <div id="DataMaintenance-interestClass">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">兴趣班设置</span>
      </div>
      <div class="cr-head-right fs14">
        <i class="mh-jtsz mr5 cur-pointer" @click="onClickSet"></i>
        <span class="mr20 cur-pointer" @click="onClickSet">兴趣班类型设置</span>
        <el-button type="primary" size="mini" @click="handAdd">{{
          $t("gradenSet.gradenSet.interestClass.50zgndl4hlc0")
        }}</el-button>
      </div>
    </div>
    <div class="pAll12 bt_EBEEF5">
      <div class="flex-wrap">
        <div class="flex-al mb12">
          <div class="select-box" style="width: 170px">
            <el-select
              v-model="filter.hobbytype_id"
              clearable
              filterable
              placeholder="选择兴趣班类型"
              @change="search"
              @clear="search"
            >
              <el-option
                v-for="item in filter.hobbyTypeList"
                :key="item.hobbytype_id"
                :label="item.hobbytype_name"
                :value="item.hobbytype_id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="lines ml16 mr16 mb12"></div>
        <div class="flex-al mb12">
          <div class="select-box" style="width: 170px">
            <el-select
              v-model="filter.hobbyitem_status"
              clearable
              filterable
              placeholder="请选择是否启用"
              @change="search"
              @clear="search"
            >
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </div>
        </div>
        <div class="lines ml16 mr16 mb12"></div>
        <div class="flex-al Inquire-box mb12">
          <div class="ipt-box" style="width: 250px">
            <el-input
              v-model="filter.keyword"
              clearable
              placeholder="可检索兴趣班明细"
              @clear="search"
              @keyup.enter.native="search"
            ></el-input>
          </div>
          <el-button
            type="primary"
            size="mini"
            class="search-btn fs14"
            @click="search"
            >{{
              $t("gradenSet.gradenSet.interestClass.50zgndl4jaw0")
            }}</el-button
          >
        </div>
      </div>
      <div class="tableDiv" ref="auto_height_table">
        <settingTableCont :tableData="tableList" @switchChange="switchChange">
          <!-- 按钮操作组********start -->
          <el-table-column
            ref="fixedColumn"
            :label="$t('gradenSet.gradenSet.interestClass.50zgndl4jqs0')"
            align="center"
            width="120px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.prevent="handEdit(scope.row)"
                >{{
                  $t("gradenSet.gradenSet.interestClass.50zgndl4k800")
                }}</el-button
              >
              <el-button
                type="text"
                size="small"
                @click.native.prevent="handDelete(scope.row)"
                >{{
                  $t("gradenSet.gradenSet.interestClass.50zgndl4ksw0")
                }}</el-button
              >
            </template>
          </el-table-column>
          <!-- 按钮操作组********end -->
        </settingTableCont>
        <!-- 分页 -->
        <el-pagination
          style="margin: 10px"
          :current-page.sync="paging.curPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.pageTotal"
          @current-change="curPageChange"
          @size-change="pageSizeChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 侧边弹窗******新增或者编辑学生兴趣班原因 -->
    <el-drawer
      :title="isEdit ? '编辑兴趣班' : '新增兴趣班'"
      :visible.sync="cancelVisible"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box"
      :before-close="handleClose"
    >
      <div class="slider-btn">
        <el-button
          v-if="!isEdit"
          type="primary"
          size="mini"
          @click="onSubmit"
          >{{ $t("gradenSet.gradenSet.interestClass.50zgndl4ljs0") }}</el-button
        >
        <el-button v-else type="primary" size="mini" @click="onEditSubmit">{{
          $t("gradenSet.gradenSet.interestClass.50zgndl4ljs0")
        }}</el-button>
      </div>
      <div class="slider-content pAll20" v-if="cancelVisible">
        <el-form label-width="120px" :model="ruleForm" ref="ruleForm">
          <el-form-item
            label="兴趣班类型"
            prop="hobbytype_id"
            :rules="[
              {
                required: true,
                message: '请选择兴趣班类型',
              },
            ]"
          >
            <el-select
              v-model="ruleForm.hobbytype_id"
              clearable
              filterable
              placeholder="请选择兴趣班类型"
              style="width: 320px"
            >
              <el-option
                v-for="item in filter.hobbyTypeList"
                :key="item.hobbytype_id"
                :label="item.hobbytype_name"
                :value="item.hobbytype_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-radio-group v-model="family_radio" style="margin-left: 30px">
            <div
              class="family-list-info flex-al"
              v-for="(item, index) in familyNum"
              :key="index"
            >
              <div class="f-label-title" style="width: 90px">
                {{ item.title }}
              </div>
              <el-form label-width="0px" :model="item" :ref="`Setup${index}`">
                <el-form-item
                  class="name"
                  style="width: 320px"
                  prop="hobbyitem_name"
                  :rules="[
                    {
                      required: true,
                      message: '请输入兴趣班明细',
                    },
                  ]"
                >
                  <el-input
                    v-model="item.hobbyitem_name"
                    clearable
                    placeholder="请输入兴趣班明细"
                    style="width: 320px"
                  ></el-input>
                </el-form-item>
              </el-form>

              <div class="flex-al" @click.stop v-if="!isEdit">
                <span
                  v-if="index == 0"
                  class="ml5 cur-pointer"
                  @click="addFamily"
                >
                  <i
                    class="el-icon-circle-plus-outline"
                    style="font-size: 18px; color: #f78f0e"
                  ></i>
                </span>
                <span
                  v-if="index > 0"
                  class="btn-delete cur-pointer ml5"
                  @click="Clickdelete(index)"
                >
                  <i
                    class="el-icon-remove-outline"
                    style="font-size: 18px; color: #f78f0e"
                  ></i>
                </span>
              </div>
            </div>
          </el-radio-group>
          <el-form-item
            label="是否启用"
            prop="hobbyitem_status"
            :rules="[
              {
                required: true,
                message: '请选择是否启用',
              },
            ]"
          >
            <el-select
              v-model="ruleForm.hobbyitem_status"
              clearable
              filterable
              placeholder="请选择是否启用"
              style="width: 320px"
            >
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <p class="color-red">
          * {{ $t("gradenSet.gradenSet.interestClass.50zgndl4mz80") }}
        </p>
      </div>
    </el-drawer>
    <!-- 侧边弹窗******兴趣班类型设置 -->
    <el-drawer
      title="兴趣班类型设置"
      :visible.sync="settingVisible"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box"
      :before-close="handleClose"
    >
      <div class="slider-btn">
        <el-button type="primary" size="mini" @click="handAddType"
          >新增</el-button
        >
      </div>
      <div class="slider-content pAll20">
        <div class="flex-al Inquire-box mb12">
          <div class="ipt-box" style="width: 250px">
            <el-input
              v-model="drawerFilter.keyword"
              clearable
              placeholder="可检索兴趣班类型"
              @clear="drawerSearch"
              @keyup.enter.native="drawerSearch"
            ></el-input>
          </div>
          <el-button
            type="primary"
            size="mini"
            class="search-btn fs14"
            @click="drawerSearch"
            >{{
              $t("gradenSet.gradenSet.interestClass.50zgndl4jaw0")
            }}</el-button
          >
        </div>
        <div class="tableDiv" ref="auto_height_table">
          <settingTableCont :tableData="drawerTableList">
            <!-- 按钮操作组********start -->
            <el-table-column
              ref="fixedColumn"
              :label="$t('gradenSet.gradenSet.interestClass.50zgndl4jqs0')"
              align="center"
              width="120px"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="handEditType(scope.row)"
                  >{{
                    $t("gradenSet.gradenSet.interestClass.50zgndl4k800")
                  }}</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="handDeleteType(scope.row)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
            <!-- 按钮操作组********end -->
          </settingTableCont>
        </div>
      </div>
    </el-drawer>
    <div class="small-dialog">
      <el-dialog
        :title="isDialogEdit ? '编辑兴趣班类型' : '新增兴趣班类型'"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose"
      >
        <div class="dialog-content">
          <el-form label-width="110px" :model="dialogForm" ref="dialogForm">
            <el-form-item
              label="兴趣班类型"
              prop="hobbytype_name"
              :rules="[
                {
                  required: true,
                  message: '请输入兴趣班类型',
                },
              ]"
            >
              <el-input
                clearable
                placeholder="请输入兴趣班类型"
                v-model="dialogForm.hobbytype_name"
                style="width: 320px"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="hobbytype_remk">
              <el-input
                clearable
                type="textarea"
                placeholder="请输入备注"
                v-model="dialogForm.hobbytype_remk"
                style="width: 320px"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" @click="onClickConfirmDialog">{{
            $t("chargeItemBox.PolicyBox.perferentialCheck.516wx6xw1i80")
          }}</el-button>
          <el-button size="mini" @click="dialogVisible = false">{{
            $t("chargeItemBox.PolicyBox.perferentialCheck.516wx6xw1tw0")
          }}</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 删除兴趣班原因 -->
    <popTips
      :dialogVisable="delItem"
      :popTipsCont="popTips_del_item"
      @handConfirm="delHobbyitemAction"
      @handCancel="delItem = false"
      @handleCloseTip="delItem = false"
    ></popTips>
    <!-- 删除兴趣班原因 -->
    <popTips
      :dialogVisable="delType"
      :popTipsCont="popTips_del_type"
      @handConfirm="delHobbytypeAction"
      @handCancel="delType = false"
      @handleCloseTip="delType = false"
    ></popTips>
  </div>
</template>

<script>
import settingTableCont from "@/components/tables/settingTableCont.vue";
import popTips from "@/components/common/popTips/popTips.vue";
import setHttp from "../../Set";

export default {
  name: "setting",
  components: {
    settingTableCont,
    popTips,
  },
  data() {
    return {
      delItem: false, //删除学生兴趣班原因
      delType: false, //删除学生兴趣班原因
      cancelVisible: false, //新增或者编辑职务
      isEdit: false, //是否编辑职务
      hobbytypeId: "",
      hobbyitemId: "",
      popTips_del_item: {
        btn_text1: this.$t("gradenSet.gradenSet.interestClass.50zgndl4nao0"),
        btn_text2: this.$t("gradenSet.gradenSet.interestClass.50zgndl4nn00"),
        title: "删除兴趣班明细",
        context: this.$t("gradenSet.gradenSet.interestClass.50zgndl4ogo0"),
      },
      popTips_del_type: {
        btn_text1: this.$t("gradenSet.gradenSet.interestClass.50zgndl4nao0"),
        btn_text2: this.$t("gradenSet.gradenSet.interestClass.50zgndl4nn00"),
        title: "删除兴趣班类型",
        context: this.$t("gradenSet.gradenSet.interestClass.50zgndl4ogo0"),
      },
      //检索-table
      filter: {
        hobbytype_id: "",
        hobbyitem_status: "",
        keyword: "",
        hobbyTypeList: [],
      },
      drawerFilter: { keyword: "" },
      // 表格数据
      tableList: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: 0,
        },
      },
      // 表格数据
      drawerTableList: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: 600,
        },
      },
      // 分页
      paging: {
        curPage: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      // 表单
      ruleForm: {
        hobbytype_id: "",
        hobbyitem_status: "",
      },
      family_radio: 0,
      familyNum: [
        {
          title: "兴趣班明细",
          hobbyitem_name: "",
        },
      ],
      settingVisible: false,
      dialogVisible: false,
      isDialogEdit: false,
      dialogForm: {
        hobbytype_name: "",
        hobbytype_remk: "",
      },
    };
  },
  created() {
    this.getHobbyitemList();
    this.getHobbytypeAllList();
  },
  methods: {
    //园务相关设置 列表
    getHobbyitemList() {
      setHttp
        .getHobbyitemList({
          is_count: 1, //是否需要总数，可以不传
          p: this.paging.curPage,
          num: this.paging.pageSize,
          //筛选条件
          keyword: this.filter.keyword,
          hobbytype_id: this.filter.hobbytype_id,
          hobbyitem_status: this.filter.hobbyitem_status,
        })
        .then((res) => {
          this.paging.pageTotal = parseInt(res.data.result.allnum);
          this.tableList.columns = res.data.result.field;
          this.tableList.columns.forEach((el) => {
            if (el.fieldstring === "hobbyitem_status") {
              this.$set(el, "switchVisible", true);
            }
          });
          if (res.data.error == 0) {
            this.tableList.list = res.data.result.list;
          } else {
            this.tableList.list = [];
            this.tableList.options.errortip = res.data.errortip;
          }
        });
    },
    getHobbytypeAllList() {
      setHttp.getHobbytypeList({}).then((res) => {
        if (res.data.error == 0) {
          this.filter.hobbyTypeList = res.data.result.list;
        } else {
          this.filter.hobbyTypeList = [];
        }
      });
    },
    getHobbytypeList() {
      setHttp
        .getHobbytypeList({
          keyword: this.drawerFilter.keyword,
        })
        .then((res) => {
          this.drawerTableList.columns = res.data.result.field;
          if (res.data.error == 0) {
            this.drawerTableList.list = res.data.result.list;
          } else {
            this.drawerTableList.list = [];
            this.drawerTableList.options.errortip = res.data.errortip;
          }
        });
    },
    //检索
    search() {
      this.paging.curPage = 1;
      this.getHobbyitemList();
    },
    drawerSearch() {
      this.getHobbytypeList();
    },
    Clickdelete(k) {
      this.familyNum.splice(k, 1);
    },
    addFamily() {
      let family = {
        title: "",
        hobbyitem_name: "",
      };
      this.familyNum.push(family);
    },
    switchChange(v) {
      setHttp
        .updateHobbyitemAction({
          hobbyitem_name: v.hobbyitem_name,
          hobbytype_id: v.hobbytype_id,
          hobbyitem_status: v.hobbyitem_status,
          hobbyitem_id: v.hobbyitem_id,
        })
        .then((res) => {
          if (res.data.error == 0) {
            this.$message({
              message: res.data.errortip,
              type: "success",
            });
          } else {
            this.$message.error(res.data.errortip);
          }
          this.getHobbyitemList();
        });
    },
    //新增
    handAdd() {
      this.getHobbytypeAllList();
      this.isEdit = false; //是否编辑
      this.cancelVisible = !this.cancelVisible;
      this.resetForm("ruleForm");
      console.log("we");
    },
    handAddType() {
      this.isDialogEdit = false; //是否编辑
      this.dialogVisible = !this.dialogVisible;
      this.resetForm("dialogForm");
      this.dialogForm = {
        hobbytype_name: "",
        hobbytype_remk: "",
      };
    },
    //编辑
    handEdit(v) {
      this.hobbyitemId = v.hobbyitem_id;
      this.resetForm("ruleForm");
      this.ruleForm = {
        hobbytype_id: v.hobbytype_id,
        hobbyitem_status: v.hobbyitem_status,
      };
      this.familyNum[0].hobbyitem_name = v.hobbyitem_name;
      this.isEdit = true;
      this.cancelVisible = !this.cancelVisible;
    },
    handEditType(v) {
      this.hobbytypeId = v.hobbytype_id;
      this.resetForm("dialogForm");
      this.dialogForm = {
        hobbytype_name: v.hobbytype_name,
        hobbytype_remk: v.hobbytype_remk,
      };
      this.isDialogEdit = true;
      this.dialogVisible = !this.dialogVisible;
    },
    //删除
    handDelete(v) {
      this.hobbyitemId = v.hobbyitem_id;
      this.delItem = !this.delItem;
    },
    handDeleteType(v) {
      this.hobbytypeId = v.hobbytype_id;
      this.delType = !this.delType;
    },
    delHobbyitemAction() {
      setHttp
        .delHobbyitemAction({
          hobbyitem_id: this.hobbyitemId,
        })
        .then((res) => {
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.delItem = false;
            this.getHobbyitemList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    delHobbytypeAction() {
      setHttp
        .delHobbytypeAction({
          hobbytype_id: this.hobbytypeId,
        })
        .then((res) => {
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.delType = false;
            this.getHobbytypeList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    //侧边弹窗 - 新增 - 提交
    onSubmit() {
      this.familyNum.forEach((item, index) => {
        this.$Tool.isNull1(`Setup${index}`, this);
      });
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (
            this.familyNum.every((item, index) => {
              if (!this.$Tool.isNull1(`Setup${index}`, this)) {
                return false;
              } else {
                return true;
              }
            })
          ) {
            let hobbyitems = [];
            this.familyNum.forEach((v) => {
              hobbyitems.push({
                hobbyitem_name: v.hobbyitem_name,
                hobbytype_id: this.ruleForm.hobbytype_id,
                hobbyitem_status: this.ruleForm.hobbyitem_status,
              });
            });
            setHttp
              .addHobbyitemAction({
                hobbyitems: JSON.stringify(hobbyitems),
              })
              .then((res) => {
                if (res.data.error == 0) {
                  this.$message({
                    message: res.data.errortip,
                    type: "success",
                  });
                  this.cancelVisible = false;
                  this.getHobbyitemList();
                } else {
                  this.$message.error(res.data.errortip);
                }
              });
          }
        }
      });
    },
    //侧边弹窗 - 编辑 - 提交
    onEditSubmit() {
      this.familyNum.forEach((item, index) => {
        this.$Tool.isNull1(`Setup${index}`, this);
      });
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (
            this.familyNum.every((item, index) => {
              if (!this.$Tool.isNull1(`Setup${index}`, this)) {
                return false;
              } else {
                return true;
              }
            })
          ) {
            setHttp
              .updateHobbyitemAction({
                hobbyitem_name: this.familyNum[0].hobbyitem_name,
                hobbytype_id: this.ruleForm.hobbytype_id,
                hobbyitem_status: this.ruleForm.hobbyitem_status,
                hobbyitem_id: this.hobbyitemId,
              })
              .then((res) => {
                if (res.data.error == 0) {
                  this.$message({
                    message: res.data.errortip,
                    type: "success",
                  });
                  this.cancelVisible = false;
                  this.getHobbyitemList();
                } else {
                  this.$message.error(res.data.errortip);
                }
              });
          }
        }
      });
    },
    onClickSet() {
      this.settingVisible = true;
      this.getHobbytypeList();
    },
    // 页码变化
    curPageChange(v) {
      this.paging.curPage = v;
      this.getHobbyitemList();
    },
    // pageSize改变
    pageSizeChange() {
      this.paging.curPage = 1;
      this.getHobbyitemList();
    },
    // 重置表单
    resetForm(form) {
      // 数据清空
      this.ruleForm = {
        hobbytype_id: "",
        hobbyitem_status: "",
      };
      this.familyNum = [
        {
          title: "兴趣班明细",
          hobbyitem_name: "",
        },
      ];
      if (this.$refs[form]) {
        this.$refs[form].resetFields();
      }
    },
    //侧边弹窗-关闭
    handleClose(done) {
      done();
    },
    onClickConfirmDialog() {
      let canSubmit = this.$Tool.isNull("dialogForm", this);
      if (canSubmit) {
        if (this.isDialogEdit) {
          setHttp
            .updateHobbytypeAction({
              hobbytype_id: this.hobbytypeId,
              hobbytype_name: this.dialogForm.hobbytype_name,
              hobbytype_remk: this.dialogForm.hobbytype_remk,
            })
            .then((res) => {
              if (res.data.error == 0) {
                this.$message({ message: res.data.errortip, type: "success" });
                this.dialogVisible = false;
                this.getHobbytypeList();
              } else {
                this.$message.error(res.data.errortip);
              }
            });
        } else {
          setHttp
            .addHobbytypeAction({
              hobbytype_name: this.dialogForm.hobbytype_name,
              hobbytype_remk: this.dialogForm.hobbytype_remk,
            })
            .then((res) => {
              if (res.data.error == 0) {
                this.$message({ message: res.data.errortip, type: "success" });
                this.dialogVisible = false;
                this.getHobbytypeList();
              } else {
                this.$message.error(res.data.errortip);
              }
            });
        }
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 55
        );
      }
    });
  },
};
</script>

<style lang="less" scoped>
#DataMaintenance-interestClass {
  .f-label-title {
    display: inline-block;
    width: 80px !important;
    line-height: 36px;
    text-align: left;
    color: #55606e;
    // margin-left: 30px;
  }
  .family-list-info {
    &:first-child:before {
      content: "*";
      color: #ff1010;
      margin-right: 4px;
    }
    &:not(:first-child) {
      margin-left: 10px;
    }
    position: relative;
    font-size: 14px;
    line-height: 36px;
    margin-bottom: 22px;
    .el-form-item {
      margin-bottom: 0px;
    }
    // 默认单选按钮样式
    .isdefault {
      margin-right: 0px;
    }
    .el-form-item__error {
      position: absolute;
    }
    .el-form-item {
      display: inline-block;
      width: 110px;
      .el-form-item__content {
        margin-left: 0px !important;
      }
    }
    .name {
      width: 90px;
      margin: 0px 10px 0 0;
    }
    .mobile {
      width: 120px;
    }
  }
}
</style>
